import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      seriesMap: new Map(),
      seriesSet: new Set(),
      earlyWarningOption: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(9, 37, 56, 0.5)',
          extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
        },
        legend: {
          top: 5,
          left: 38,
          itemWidth: 18,
          itemHeight: 5,
          data: ['环境', '塔吊', '升降机', '视频监控', '违规记录'],
          textStyle: {
            color: '#a8c5ed'
          }
        },
        grid: {
          top: 20,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: [],
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          },
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            max: 20,
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          },
          {
            type: 'value',
            position: 'right',
            max: 40,
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          }
        ],
        series: [
          {
            name: '背景',
            type: 'line',
            xAxisIndex: 1,
            silent: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(8, 59, 81, 0)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(8, 59, 81, 1)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            lineStyle: {
              opacity: 0
            },
            itemStyle: {
              color: '#2582fb',
              opacity: 0
            },
            data: [10, 10, 10, 10, 10, 10, 10]
          },
          {
            name: '环境',
            type: 'line',
            symbol: 'circle',
            yAxisIndex: 1,
            symbolSize: 5,
            itemStyle: {
              color: '#00ff9c'
            },
            data: []
          },
          {
            name: '塔吊',
            type: 'line',
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              color: '#0080fd'
            },
            data: []
          },
          {
            name: '升降机',
            type: 'line',
            symbol: 'circle',
            yAxisIndex: 1,
            itemStyle: {
              color: '#00ff9c'
            },
            data: []
          },
          {
            name: '视频监控',
            type: 'line',
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              color: '#e74c4e'
            },
            data: []
          },
          {
            name: '违规记录',
            type: 'line',
            symbol: 'circle',
            yAxisIndex: 1,
            symbolSize: 5,
            itemStyle: {
              color: '#ffa037'
            },
            data: []
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      currentUser: 'currentUser'
    })
  },
  watch: {
    currentUser () {
      if (this.currentUser.mid) {
        this.getScreenAlarmTrend()
      }
    }
  },
  methods: {
    initTime () {
      this.earlyWarningOption.xAxis[0].data = []
      for (let i = 0; i < 7; i++) {
        let time = this.$moment().subtract(i + 1, 'days').format('MM-DD')
        this.earlyWarningOption.xAxis[0].data.unshift(time)
        this.seriesMap.set(time, 0)
      }
    },
    resetTime () {
      for (let i = 0; i < 7; i++) {
        let time = this.$moment().subtract(i + 1, 'days').format('MM-DD')
        this.seriesMap.set(time, 0)
      }
    },
    getScreenAlarmTrend () {
      const data = {
        'stageId': this.currentUser.stageId,
        'pjId': this.currentUser.pjId
      }
      this.$axios({
        method: 'post',
        url: `${this.$site.videoServer}/api/screen/getScreenAlarmTrend`,
        data: this.$qs.stringify(data, {indices: false})
      }).then(res => {
        this.initTime()
        this.initAlarmTrendDataMin(res.data.data)
        this.findMax()
        this.initEarlyWarning()
      })
    },
    initAlarmTrendDataMin (item) {
      this.earlyWarningOption.series[1].data = this.initSeriesData(item.environmentList)
      this.resetTime()
      this.earlyWarningOption.series[2].data = this.initSeriesData(item.towercraneList)
      this.resetTime()
      this.earlyWarningOption.series[3].data = this.initSeriesData(item.elevatorList)
      this.resetTime()
      this.earlyWarningOption.series[4].data = this.initSeriesData(item.videocatchList)
      this.resetTime()
      this.earlyWarningOption.series[5].data = this.initSeriesData(item.violationList)
    },
    initSeriesData (items) {
      items.forEach(item => {
        let time = this.$moment(item.time * 1000).format('MM-DD')
        if (this.seriesMap.has(time)) {
          this.seriesMap.set(time, item.count)
          this.seriesSet.add(item.count)
        }
      })
      return [...this.seriesMap.values()].reverse()
    },
    findMax () {
      let max = 0
      if (this.seriesSet.size > 0) {
        max = Math.max(...this.seriesSet) + 8
      }
      this.earlyWarningOption.yAxis[0].max = max || 0
      this.earlyWarningOption.yAxis[1].max = max || 0
      this.earlyWarningOption.series[0].data = [max / 2, max / 2, max / 2, max / 2, max / 2, max / 2, max / 2]
    },
    initEarlyWarning () {
      if (!this.earlyWarningEchart) {
        this.earlyWarningEchart = this.$echarts.init(this.$refs.changeWarning)
      }
      this.earlyWarningEchart.setOption(this.earlyWarningOption)
    }
  }
}
